import React from 'react';

const withSize = (Component) => ({ size, ...props }) => (
  <Component {...props} />
);

const SvgBase = ({ children, rx = 6 }) => (
  <svg width="100%" height="100%" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet">
    <rect x="0" y="0" width="32" height="32" fill="white" rx={rx} />
    {children}
  </svg>
);

const Grid3Svg = () => (
    <SvgBase>
        <rect x="4" y="4" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="13" y="4" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="22" y="4" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="4" y="13" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="13" y="13" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="22" y="13" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="4" y="22" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="13" y="22" width="6" height="6" fill="#e64503" rx="1" />
        <rect x="22" y="22" width="6" height="6" fill="#e64503" rx="1" />
    </SvgBase>
);

const Grid2Svg = () => (
    <SvgBase>
        <rect x="4" y="4" width="10" height="10" fill="#e64503" rx="2" />
        <rect x="18" y="4" width="10" height="10" fill="#e64503" rx="2" />
        <rect x="4" y="18" width="10" height="10" fill="#e64503" rx="2" />
        <rect x="18" y="18" width="10" height="10" fill="#e64503" rx="2" />
    </SvgBase>
);

const Grid4Svg = () => (
    <SvgBase>
        <rect x="3" y="3" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="10" y="3" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="17" y="3" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="24" y="3" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="3" y="10" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="10" y="10" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="17" y="10" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="24" y="10" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="3" y="17" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="10" y="17" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="17" y="17" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="24" y="17" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="3" y="24" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="10" y="24" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="17" y="24" width="5" height="5" fill="#e64503" rx="1" />
        <rect x="24" y="24" width="5" height="5" fill="#e64503" rx="1" />
    </SvgBase>
);

const Dots5Svg = () => (
    <SvgBase>
        <circle cx="3" cy="3" r="2" fill="#FF9500" />
        <circle cx="9" cy="3" r="2" fill="#FF9500" />
        <circle cx="15" cy="3" r="2" fill="#FF9500" />
        <circle cx="21" cy="3" r="2" fill="#FF9500" />
        <circle cx="27" cy="3" r="2" fill="#FF9500" />
        <circle cx="3" cy="9" r="2" fill="#FF9500" />
        <circle cx="9" cy="9" r="2" fill="#FF9500" />
        <circle cx="15" cy="9" r="2" fill="#FF9500" />
        <circle cx="21" cy="9" r="2" fill="#FF9500" />
        <circle cx="27" cy="9" r="2" fill="#FF9500" />
        <circle cx="3" cy="15" r="2" fill="#FF9500" />
        <circle cx="9" cy="15" r="2" fill="#FF9500" />
        <circle cx="15" cy="15" r="2" fill="#FF9500" />
        <circle cx="21" cy="15" r="2" fill="#FF9500" />
        <circle cx="27" cy="15" r="2" fill="#FF9500" />
        <circle cx="3" cy="21" r="2" fill="#FF9500" />
        <circle cx="9" cy="21" r="2" fill="#FF9500" />
        <circle cx="15" cy="21" r="2" fill="#FF9500" />
        <circle cx="21" cy="21" r="2" fill="#FF9500" />
        <circle cx="27" cy="21" r="2" fill="#FF9500" />
        <circle cx="3" cy="27" r="2" fill="#FF9500" />
        <circle cx="9" cy="27" r="2" fill="#FF9500" />
        <circle cx="15" cy="27" r="2" fill="#FF9500" />
        <circle cx="21" cy="27" r="2" fill="#FF9500" />
        <circle cx="27" cy="27" r="2" fill="#FF9500" />
    </SvgBase>
);

const WaterDropSvg = () => (
    <SvgBase>
        <ellipse cx="16" cy="20" rx="12" ry="16" fill="#FF9500" />
        <circle cx="16" cy="12" r="3" fill="white" />
    </SvgBase>
);

const PentagonSvg = () => (
    <SvgBase>
        <polygon points="16,2 28,10 24,26 8,26 4,10" fill="#FF9500" />
        <polygon points="16,8 24,14 22,24 10,24 8,14" fill="white" />
    </SvgBase>
);

const TriangleSvg = () => (
    <SvgBase>
        <polygon points="16,4 4,28 28,28" fill="#FF9500" />
        <polygon points="16,10 8,24 24,24" fill="white" />
    </SvgBase>
);

const DiamondSvg = () => (
    <SvgBase>
        <rect x="8" y="8" width="16" height="16" fill="#FF9500" transform="rotate(45 16 16)" />
        <rect x="12" y="12" width="8" height="8" fill="white" transform="rotate(45 16 16)" />
    </SvgBase>
);

const StarSvg = () => (
    <SvgBase>
        <polygon points="16,2 19,11 28,11 21,17 24,26 16,20 8,26 11,17 4,11 13,11" fill="#FF9500" />
        <polygon points="16,6 18,13 25,13 20,17 22,24 16,18 10,24 12,17 7,13 14,13" fill="white" />
    </SvgBase>
);

export const IconGrid3 = withSize(Grid3Svg);
export const IconGrid2 = withSize(Grid2Svg);
export const IconGrid4 = withSize(Grid4Svg);
export const IconDots5 = withSize(Dots5Svg);
export const IconWaterDrop = withSize(WaterDropSvg);
export const IconPentagon = withSize(PentagonSvg);
export const IconTriangle = withSize(TriangleSvg);
export const IconDiamond = withSize(DiamondSvg);
export const IconStar = withSize(StarSvg);

export default {
    IconGrid3,
    IconGrid2,
    IconGrid4,
    IconDots5,
    IconWaterDrop,
    IconPentagon,
    IconTriangle,
    IconDiamond,
    IconStar,
};


